<template>
  <header class="mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" v-show="showBack"></a>
    <h1 class="mui-title" v-text="headName">美荷交友</h1>
    <button id="setting" class="mui-pull-right mui-btn-link setting" v-show="showSetting" @tap="setEvent">
      <img src="../../assets/images/ico/ic_more_b.png" alt="设置">
    </button>
    <button class="mui-pull-right mui-btn-link choose-all" v-show="showAllChoose" @tap="allChoose">全选</button>
    <button class="mui-pull-right mui-btn-link send" v-show="showSend" @tap="sendDynamic">发送</button>
    <button class="mui-pull-right mui-btn-link choose-all" v-if="showCustom" @tap="sendDynamic">自定义</button>
  </header>
</template>

<script>
  export default {
    name: "mh-header",
    props: {
      headName: {
        type: String,
        required: true,
        default: '美荷交友'
      },
      showBack: {
        type: Boolean,
        required: false,
        default: true
      },
      showSetting: {
        type: Boolean,
        required: false,
        default: false
      },
      showAllChoose: {
        type: Boolean,
        required: false,
        default: false
      },
      showSend: {
        type: Boolean,
        required: false,
        default: false
      },
      showCustom: {
        type: Boolean,
        required: false,
        default: false
      }
    },
    methods: {
      setEvent () {
        this.$emit('setting')
      },
      allChoose () {
        this.$emit('allChoose')
      },
      sendDynamic () {
        this.$emit('sendDynamic')
      }
    }
  }
</script>

<style scoped>
  .mui-bar-nav {
    box-shadow: none;
  }
  .mui-bar {
    height: 4.5rem;
    background-color: #fff;
    border-bottom: .05rem solid #efefef;
  }
  .mui-title {
    line-height: 4.5rem;
    color: #333;
    font-size: 1.7rem;
  }
  a.mui-action-back {
    color: #e685aa;
    font-size: 3rem;
  }
  .setting {
    width: 2rem;
    line-height: 4.5rem;
  }
  .setting img {
    height: 2rem;
  }
  .choose-all {
    line-height: 4.5rem;
    font-size: 1.5rem;
    color: #333;
  }
  .send {
    line-height: 4.5rem;
    font-size: 1.5rem;
    color: #de73a4;
  }
</style>
